<template>
    <div class="h-camera-description">
        <div>
            <el-row v-for="(item, index) in props.data" :key="index">
                <el-col :span="12" class="ellipsis">
                    <span :title="item.key">{{ item.key }}</span>
                </el-col>
                <el-col :span="12" class="ellipsis" style="display: flex; flex-wrap: wrap;">
                    <span :title="item.value.toString()" v-html="item.value"
                        v-if="(typeof item.value !== 'boolean')"></span>
                    <el-switch v-model="item.value" size="small" v-else disabled/>
                </el-col>
            </el-row>
            <slot></slot>
        </div>
    </div>
</template>
<script setup lang="ts">

const props = withDefaults(defineProps<{
    data: {
        key: string
        value: any
    }[]
}>(), {
    data: () => [{
        key: '未知',
        value: '未知'
    }]
})

</script>
<style scoped lang="less">
.el-col {
    padding-right: 20px;
}
</style>
